<template>
  <div class="register-container">
    <el-form ref="formRef" :model="form" :rules="rules" class="register-form">
      <h3 class="title">创建公寓</h3>
      
      <el-form-item prop="name">
        <el-input 
          v-model="form.name"
          placeholder="公寓名称"
        >
          <template #prefix>
            <el-icon><House /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="regionCode">
        <div class="custom-input">
          <el-icon class="prefix-icon"><MapLocation /></el-icon>
          <RegionCascader
            v-model="form.regionCode"
            v-model:regionName="form.regionName"
            placeholder="请选择所在区域"
          />
        </div>
      </el-form-item>

      <el-form-item prop="address">
        <el-input 
          v-model="form.address"
          placeholder="详细地址"
        >
          <template #prefix>
            <el-icon><Location /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="phonenumber">
        <el-input 
          v-model="form.phonenumber"
          placeholder="客服电话"
        >
          <template #prefix>
            <el-icon><Phone /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button 
          :loading="loading" 
          type="primary" 
          style="width:100%;"
          :disabled="hasApartment"
          @click.prevent="handleSubmit"
        >
          <template v-if="hasApartment">
            已创建公寓
          </template>
          <template v-else>
            {{ loading ? '创建中...' : '创建' }}
          </template>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { House, Location, Phone, MapLocation } from '@element-plus/icons-vue'
import RegionCascader from '@/components/RegionCascader'
import { addApartment } from '@/api/room/apartment'
import apartmentApi from '@/api/room/apartment'
import { useRouter } from 'vue-router'

const router = useRouter()
const { proxy } = getCurrentInstance()

const loading = ref(false)
const hasApartment = ref(false)

const form = ref({
  name: '',
  regionCode: '',
  regionName: '',
  address: '',
  phonenumber: ''
})

const rules = {
  name: [
    { required: true, message: '请输入公寓名称', trigger: 'blur' }
  ],
  regionCode: [
    { required: true, message: '请选择所在区域', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ],
  phonenumber: [
    { required: true, message: '请输入客服电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}

// 检查是否已有公寓
function checkApartment() {
  apartmentApi.getApartmentInfo().then(res => {
    if (res.code === 200 && res.data) {
      hasApartment.value = true
    }
  })
}

function handleSubmit() {
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      loading.value = true
      addApartment(form.value)
        .then(res => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess('创建成功')
            router.push('/login')
          }
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

// 页面加载时检查公寓状态
onMounted(() => {
  checkApartment()
})
</script>

<style lang="scss" scoped>
.register-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7f9;

  .register-form {
    width: 400px;
    padding: 25px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .title {
      text-align: center;
      margin: 0 0 30px 0;
      color: #333;
    }

    .custom-input {
      position: relative;
      display: flex;
      align-items: center;
      background-color: #f5f7f9;
      border-radius: 4px;

      .prefix-icon {
        position: absolute;
        left: 16px;
        font-size: 18px;
        color: #909399;
        z-index: 1;
      }

      :deep(.el-cascader) {
        flex: 1;

        .el-input__wrapper {
          padding-left: 40px;
          background-color: transparent;
          box-shadow: none;
          
          &.is-focus {
            background-color: #fff;
            border: 1px solid var(--el-color-primary);
            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
          }
        }
      }
    }

    :deep(.el-input) {
      .el-input__wrapper {
        padding-left: 16px;
        background-color: #f5f7f9;
        border: none;
        box-shadow: none;

        &.is-focus {
          background-color: #fff;
          border: 1px solid var(--el-color-primary);
          box-shadow: 0 0 0 1px var(--el-color-primary) inset;
        }
      }

      .el-input__prefix {
        font-size: 18px;
        color: #909399;
      }
    }
  }
}
</style>
